<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <unit-table
        ref="manageMonitor"
        :columns="this.$staticMenu.manageMonitorColumns"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :type="tableType"
        :url="tableUrl"
        rowKeyName="id"
        @onSelect="tableOnSelect"
      >
        <!-- 补充表格操作 -->
        <div slot='tableAct' class="actionBtn">
          <a-button type="primary">
            <a-icon type="plus"/>
            添加
          </a-button>
          <a-button type="danger">
            <a-icon type="delete"/>
            删除
          </a-button>
          <a-button ghost type="primary">
            <a-icon type="play-circle"/>
            启用
          </a-button>
          <a-button>
            <a-icon type="stop"/>
            禁用
          </a-button>
          <router-link :to="{path:'/hostList',query:{system:'监控管理'}}">
            <a-button icon="left" style="float:right" type="primary"/>
          </router-link>

        </div>
        <!-- end -->
      </unit-table>

    </a-layout-content>
  </a-layout>
</template>

<script>
  import {GETAPPROVALLIST} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"

  export default {
    name: 'manageMonitor',
    components: {
      unitTable
    },
    data() {
      return {
        tableSelectedKeys: [],
        tableUrl: GETAPPROVALLIST.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETAPPROVALLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40']
      }
    },
    methods: {
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      }

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }

  .action {
    color: #1890ff
  }
</style>
